{include file="public/layout" /}
<body class="laytp-container">
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div class="layui-card" id="search-form">
	<div class="layui-card-body">
		<form class="layui-form layui-row layui-col-space16 layui-search-admin">
		<div class="layui-inline">
			<label class="layui-form-label">会员编号</label>
			<div class="layui-input-inline" >
				<input type="text" name="username" placeholder="会员编号" lay-affix="clear" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">操作时间</label>
			<div class="layui-inline" id="laydate-rangeLinked">
				<div class="layui-input-inline">
					<input type="text" name="time_start" autocomplete="off" id="table-search-date-start" class="layui-input" placeholder="开始日期">
				</div>-
				<div class="layui-input-inline">
					<input type="text" name="time_end" autocomplete="off" id="table-search-date-end" class="layui-input" placeholder="结束日期">
				</div>
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label"></label>
			<button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">清空</button>
		</div>
	</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="tabledata" lay-filter="tabledata"></table>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" onclick="reload()">
			刷新数据
		</button>
		<button class="layui-btn layui-btn-sm" data-form-export="{:url('excel')}">
			导出数据
		</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="more">
			更多
			<i class="layui-icon layui-icon-down"></i>
		</a>
	</div>
</script>
<script>
	var tableIns
	var datawhere = {};
	layui.use(function(){
		var table = layui.table;
		var dropdown = layui.dropdown;
		var laydate = layui.laydate;
		var form = layui.form;

		// 创建渲染实例
		tableIns = table.render({
			elem: '#tabledata',
			url:'{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print', {
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			height: 'full-35', // 最大高度减去其他容器已占有的高度差
			css: [ // 重设当前表格样式
				'.layui-table-tool-temp{padding-right: 145px;}'
			].join(''),
			cellMinWidth: 80,
			totalRow: false, // 开启合计行
			page: true,
			pagebar: '#test-pagebar', // 分页栏模板
			cols: [[
				{type: 'checkbox', fixed: 'left'},
				{field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
				// {field:'user_id', fixed: 'left', width:80, title: '会员ID', sort: true},
				{field:'username', title: '会员编号',totalRowText: ''},
				{field:'old', title:'原上级'},
				{field:'new',  title: '新上级'},
				// {field:'pos', title: '区域'},
				{field:'admin_id', width: 100, title: '管理员'},
				{field:'w_time', title:'操作时间'},

				// {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
			]],
			error: function(res, msg){
				console.log(res, msg)
			}
		});

		// 触发单元格工具事件
		table.on('tool(test)', function(obj){ // 双击 toolDouble
			var data = obj.data; // 获得当前行数据
			// console.log(obj)
			if(obj.event === 'edit'){
				layer.open({
					title: '编辑 - id:'+ data.user_id,
					type: 2,
					shadeClose: true,
					area: ['100%','100%'],
					scrollbar:false,
					content: '{:url("detail")}/id/'+data.user_id
				});
			} else if(obj.event === 'more'){
				// 更多 - 下拉菜单
				dropdown.render({
					elem: this, // 触发事件的 DOM 对象
					show: true, // 外部事件触发即显示
					data: [{
						title: '查看',
						id: 'detail'
					},{
						title: '删除',
						id: 'del'
					}],
					click: function(menudata){
						if(menudata.id === 'detail'){
							layer.msg('查看操作，当前行 ID:'+ data.id);
						} else if(menudata.id === 'del'){
							layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
								obj.del(); // 删除对应行（tr）的DOM结构
								layer.close(index);
								// 向服务端发送删除指令
							});
						}
					},
					align: 'right', // 右对齐弹出
					style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
				})
			}
		});

		laydate.render({
			elem: '.demo-table-search-date'
		});
		laydate.render({
			elem: '#laydate-rangeLinked',
			type: 'datetime',
			range: ['#table-search-date-start', '#table-search-date-end'],
			rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
		});
		// 搜索提交
		form.on('submit(demo-table-search)', function(data){
			var field = data.field; // 获得表单字段
			datawhere = field;
			// 执行搜索重载
			table.reload('test', {
				page: {
					curr: 1 // 重新从第 1 页开始
				},
				where: field // 搜索的字段
			});
			//layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
			return false; // 阻止默认 form 跳转
		});
	});
	function add(){
		layer.open({
			title: '添加',
			type: 2,
			shadeClose: true,
			area: ['100%','100%'],
			scrollbar:false,
			content: '{:url("reg1")}'
		});
	}
	function reload(){
		layui.table.reload('test', {
			where: {
				abc: 123,
				test: '新的 test1'
			},
			// scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
			// height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
			//url: '404',
			//page: {curr: 1, limit: 30} // 重新指向分页
		}, true);
	}
	function del(){
		var checkStatus = layui.table.checkStatus('test');
		var data = checkStatus.data;
		layer.alert(layui.util.escape(JSON.stringify(data)));
	}
	function excel(){

	}
</script>
</body>
</html>